<template>
    <div>
        <el-row :gutter="20" class="firstRow">
            <el-col :span="5">
                <div>
                    <el-input v-model="SupMessage" placeholder="请输入供应商名称"></el-input>
                </div>
            </el-col>
            <el-col class="second" :span="4">
                <div class="twoDiv">
                    <el-button type="primary" @click="selectSup()">查询供应商</el-button>
                </div>
            </el-col>
            <el-col class="threeDiv" :span="4">
                <div>
                    <el-button type="primary" @click="centerDialogVisible1 = true">添加供应商</el-button>
                </div>
                <el-dialog
                        center
                        title="提示"
                        :visible.sync="centerDialogVisible1"
                        width="30%"
                        :before-close="handleClose">
                    <div class="wrapper" >
                        <div>
                            <span>编号：</span>
                            <span><el-input style="width: 150px;height: 20px" disable v-model="supNum"></el-input></span>
                        </div>
                        <div>
                            <span>名称：</span>
                            <span><el-input style="width: 150px;height: 20px" v-model="supName"></el-input></span>
                        </div>
                        <div>
                            <span style="margin-left: -30px">资金状态：</span>
                            <span><diySelect @choose="choose" :option-data="optionData"  :propsValue="selectValue"  style="width: 150px;height: 15px;" ></diySelect></span>
                        </div>
                        <div>
                            <span >金额：</span>
                            <span><el-input style="width: 150px;height: 20px" v-model="supMoney"></el-input></span>
                        </div>
                        <div>
                            <span>日期：</span>
                            <span><el-input style="width: 150px;height: 20px" v-model="supDate"></el-input></span>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="add()">确 定</el-button>
                         </span>
                </el-dialog><!--                添加供应商-->
            </el-col>
        </el-row><!--        第一对按钮-->
        <el-row>
            <div>
                <el-table
                        @cell-click="getRowIndex"
                        :data="pageData"
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="supplierId"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="supplierName"
                            label="供应商名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="moneyState"
                            label="资金状态">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="金额">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            prop="operate"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button style="background-color:#409EFF;color: white " size="mini"  @click="reviseSup(scope.row,scope.$index)">修改</el-button>
                            <el-button size="mini" style="background-color: #F56C6C;color: white" @click="centerDialogVisible2=true" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog
                    title="提示"
                    :visible.sync="centerDialogVisible2"
                    width="30%"
                    :before-close="handleClose">
                <span>确定删除这条信息？</span>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                        <el-button type="primary"  @click="del()">确 定</el-button>
                    </span>
            </el-dialog><!--        第一个表格删除-->
            <el-dialog
                    center
                    title="提示"
                    :visible.sync="centerDialogVisible3"
                    width="30%"
                    :before-close="handleClose">
                <div class="wrapper" >
                    <div>
                        <span style="margin-left: -130px">编号：</span>
                        <span>{{id}}</span>
                    </div>
                    <div>
                        <span style="margin-left: -30px">资金状态：</span>
                        <span><diySelect :option-data="optionData1" :propsValue="selectValue1"  @choose="choose1" style="width: 150px;height: 15px"></diySelect></span>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible3 = false">取 消</el-button>
                        <el-button type="primary" @click="update()">确 定</el-button>
                    </span>
            </el-dialog><!--            第一个表格修改-->
        </el-row><!--        第一个表格-->
        <el-row>
            <div class="pages">
                <paging :obj = 'pagingData'></paging>
            </div>
        </el-row><!--        第一个分页-->
    </div>
</template>

<script>
    import diySelect from "../../components/publicCom/diySelect";
    import paging from "../../components/publicCom/paging";
    import * as  url from '../../http/api'
    export default {
        name: "FirstTable",
        components:{
            diySelect,
            paging
        },
        mounted(){
            this.fenye1()
        },
        computed: {
            pagingData() {
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    pageCount: this.pageNums,//一共有几页
                    currentChange(num) {
                        // console.log(num)
                        that.currentPage = num;//改变当前页
                        that.fenye1();
                    },
                };
                return data
            },
            pageData(){
                return this.currentData
            }

        },
        data() {
            return {
                currentData: [
                    // {num: 1, name: '太太乐鸡精', state: '良好', money: 1000, date: 2010},
                    // {num: 2, name: '太太乐鸡精', state: '良好', money: 1000, date: 2010},
                    // {num: 3, name: '太太乐鸡精', state: '良好', money: 1000, date: 2010},
                ],
                optionData:[
                    {value:0, label:'未发送贷款'},
                    {value:1, label:'已发送贷款'}
                ],
                optionData1:[
                    {value:0, label:'未发送贷款'},
                    {value:1, label:'已发送贷款'}
                ],
                centerDialogVisible1: false,
                centerDialogVisible2: false,
                centerDialogVisible3: false,
                inputMessage: '',
                SupMessage:'',
                payMessage:'',
                input:'',
                supName:'',
                supNum:'',
                supMoney:'',
                supDate:'',
                addName:'',
                addRs:'',
                addMoney:'',
                addDate:'',
                addSupName:'',
                upNum:'',
                upName:'',
                upMoney:'',
                upDate:'',
                selectValue:'',
                selectValue1:'',
                currentPage:1,
                currentIndex:this.id,
                id:'',
                totalPage:'',
                pageNums:0,
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            selectSup(){
                // console.log(this.SupMessage)
                if(this.SupMessage === ''){
                    this.$message('输入值不能为空')
                }else {
                    let val = this.SupMessage;
                    let obj= {
                        name : val,
                        pageCount: 5,
                        pageSize: this.currentPage,
                        type:0
                    };
                    this.$axios({
                        url:url.financialManagementPage,
                        method:'post',
                        data:obj
                    }).then(resp=>{
                        console.log(resp)
                        if(resp.data.supplierEntityList.length > 0){
                            this.currentData = resp.data.supplierEntityList
                            this.$message.success({message:'查询成功'})
                        }else {
                            this.$message.error({message:'查询失败'})
                        }


                        // let timestamp = resp.data.supplierEntityList[0].createTime;
                        // let newDate = new Date();
                        // newDate.setTime(timestamp * 1000);
                        // resp.data.supplierEntityList[0].createTime = newDate.toLocaleDateString()
                        // this.currentData.createTime = resp.data.supplierEntityList[0].createTime;
                    })
                }

            },//查询供应商
            choose(val){
                this.selectValue = val;    //获取选项值
            },
            choose1(val){
                this.selectValue1 = val
            },
            add(){
                this.dialogVisible1 = false;
                let val = this.selectValue;
                let selectVal=this.optionData[val].label;
                let time = this.supDate;
                let money = Number(this.supMoney);
                let name = this.supName;
                let obj = {
                    createTime:time,
                    money: money,
                    moneyState:selectVal,
                    supplierName:this.supName,
                    page: {
                        name: name,
                        pageCount: 5,
                        pageSize:5,
                        type: 0    //  状态 0（供应商）或 1（开支），
                    },
                };
                this.$axios({
                    url:url.financialManagementAdd,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    console.log(resp)
                    if(resp.data.Code === 200){
                        this.$message.success({message: '添加成功！'})
                        let timestamp = time;
                        let newDate = new Date();
                        newDate.setTime(timestamp * 1);
                        time = newDate.toLocaleDateString()
                        this.currentData[0].createTime = time;
                        this.currentData.push(obj)
                    }else if(resp.data.Code === 400){
                        this.$message.error('添加失败！!')
                    }
                })
            },//添加供应商
            fenye1(){
                let obj = {
                    name:this.SupMessage,
                    pageCount:5,//页容量
                    pageSize:this.currentPage,//当前页
                    type:0,
                };
                this.$axios({
                    url:url.financialManagementPage,
                    method: 'post',
                    data:obj
                }).then(resp=>{
                    // console.log(resp)
                    this.currentData = resp.data.supplierEntityList
                    this.pageNums = resp.data.totalPage
                    // let timestamp = resp.data.supplierEntityList[0].createTime;
                    let timestamp = resp.data.supplierEntityList[0].createTime;
                    let newDate = new Date();
                    newDate.setTime(timestamp * 1);
                    resp.data.supplierEntityList[0].createTime = newDate.toLocaleDateString()
                    this.currentData[0].createTime = resp.data.supplierEntityList[0].createTime;

                })
            },
            getRowIndex(row,column,cell,event){
                this.id = row.supplierId
            },
            reviseSup(obj,index){
                this.centerDialogVisible3 = true;
                this.supplierId = obj.supplierId;
                this.supplierName = obj.supplierName;
                this.moneyState = obj.moneyState;
                this.money = obj.money;
                this.createTime = obj.createTime;
                this.currentIndex = (parseInt(this.currentPage)-1)*5 + parseInt(index)
            },
            update(){
                this.centerDialogVisible3 = false
                let val = this.selectValue1
                let label = this.optionData1[val].label;
                let obj = {
                    moneyState:label,
                    supplierId:this.id,
                    page:{
                        type:0
                    }
                };
                let data = {
                    supplierId:this.id,
                    moneyState:label,
                    money:this.money,
                    supplierName:this.supplierName,
                    createTime:this.createTime
                }
                this.$axios({
                    url:url.financialManagementUpdate,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    console.log(resp)
                    if(resp.data.Code === 200){
                        this.$message.success({message: '修改成功！'})
                        this.currentData.splice(this.currentIndex,1,data)
                    }else if(resp.data.Code === 400){
                        this.$message.error('修改失败！!')
                    }
                }).catch(err=>{
                    console.log(err)
                }) //修改



            },//第一个表格修改
            del(){
                this.centerDialogVisible2 = false;
                let obj = {
                    page:{
                        type:0,
                    },
                    supplierId: this.id,  //支出表的id

                };
                this.$axios({
                    url:url.financialManagementDelete,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    if(resp.data.Code === 200){
                        this.$message.success({message: '删除成功！'})
                        this.currentData.splice(this.currentIndex,1)
                    }else if(resp.data.Code === 400){
                        this.$message.error('删除失败！!')
                    }
                }).catch(err=>{
                    console.log(err)
                })

            }
        }
    }
</script>

<style scoped lang="less">
    .el-row {
        .twoDiv{
            padding-left: -30px;
        }
        /*border: 1px solid #c0ccda;*/
        padding-top: 10px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
    }
    .row-bg {
        background-color: #f9fafc;
    }
    .firstRow{
        /*border: 1px solid red;*/
        padding: 20px 0;
        .el-button{
            height: 40px;
            width: 130px;
            text-align: center;
        }
    }

    .pages{
        text-align: center;
        padding: 10px 0;
    }
    .wrapper{
        text-align: center;
        div{
            height: 50px;
        }
        span{
        }
    }
</style>